<template>
  <section class="main">
    <div class="title">
      <span>基本信息</span>
      <div>
        <el-button icon="el-icon-edit" @click="details()"></el-button>
        <!-- <el-button icon="el-icon-refresh" @click="refresh"></el-button> -->
      </div>
    </div>
    <div class="container container1">
      <div class="itemBox">
        <div class="line">
          <div>门店号</div>
          <div>{{shopNo}}</div>
        </div>
        <div class="line">
          <div>门店名</div>
          <div>{{shopName}}</div>
        </div>
        <div class="line">
          <div>商户号</div>
          <div>{{merchantNo}}</div>
        </div>
        <div class="line">
          <div>商户名称</div>
          <div>{{merchantName}}</div>
        </div>
        <!-- <div class="line">
          <div>商户简称</div>
          <div>{{shopName}}</div>
        </div> -->
        <div class="line">
          <div>银联终端号</div>
          <div>{{terminalNoUni}}</div>
        </div>
      </div>
      <div class="itemBox">
        <div class="line">
          <div>门店联系人</div>
          <div>{{managerName}}</div>
        </div>
        <div class="line">
          <div>联系人手机号</div>
          <div>{{managerMobile}}</div>
        </div>
        <div class="line">
          <div>门店地址</div>
          <div>{{shopAddress}}</div>
        </div>
        <div class="line">
          <div>门店状态</div>
          <div>{{statusName}}</div>
        </div>
        <div class="line">
          <div>创建时间</div>
          <div>{{createTime}}</div>
        </div>
      </div>
    </div>
    <!-- 标签 -->
    <div class="title" v-if="this.rolesId == 1 || this.rolesId == 2 || this.rolesId == 8 ||this.rolesId == 9">
      <span>标签</span>
      <div>
        <!-- <el-button type="primary">同步渠道</el-button> -->
        <el-button type="primary" @click="popuptag">添加标签</el-button>
      </div>
    </div>
    <div class="container container1" v-if="this.rolesId == 1 || this.rolesId == 2 || this.rolesId == 8 ||this.rolesId == 9">
        <el-tag class="el_tag"
            v-for="item in adm_tag"
             closable
             @close="handleClose(item.key)"
            :key="item.label"
            effect="plain">
            {{ item.label }}
        </el-tag>
        <el-tag class="el_tag"
            v-for="item in cw_tag"
             closable
             @close="handleClose(item.key)"
             type="success"
            :key="item.label"
            effect="plain">
            {{ item.label }}
        </el-tag>
        <el-tag class="el_tag"
            v-for="item in fws_tag"
             closable
             @close="handleClose(item.key)"
             type="warning"
            :key="item.label"
            effect="plain">
            {{ item.label }}
        </el-tag>
    </div>
    <br>
    <!-- 门店详情 -->
      <el-dialog v-dialogDrag title="详情修改" :visible.sync="visible" width="45%" :close-on-click-modal = "false">
        <el-form
          :model="addmendian"
          status-icon
          ref="addmendian"
          label-width="110px"
          class="demo-dynamic"
        >
          <el-form-item :required="true" label="门店名称" >
            <el-input type="text" v-model.trim="addmendian.name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="门店地址">
            <el-input type="text" v-model.trim="addmendian.address" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="门店联系人">
            <el-input type="text" v-model.trim="addmendian.contact" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item :required="true" label="联系人手机号">
            <el-input type="text" v-model.trim="addmendian.contactphone" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="银联终端号">
            <el-input type="text" v-model.trim="addmendian.bank" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="口碑门店编号">
            <el-input type="text" v-model.trim="addmendian.aliShopId" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="外部门店编号">
            <el-input type="text" v-model.trim="addmendian.alias" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="shopupdate()">确定</el-button>
        </span>
      </el-dialog>
    <!-- 标签配置 -->
    <el-dialog v-dialogDrag title="添加标签" :visible.sync="Channeldeploy1" width="35%" :close-on-click-modal='false'>
      <el-transfer 
       v-model="usedTags" 
       :data="unUsedTags"
       :titles="['未选标签', '已选择标签']" 
       filterable
       filter-placeholder="请输入关键词"
       >
       <!--  -->
      </el-transfer>
      <div style="width:100%;text-align:right;margin-top:30px;">
        <el-button type="primary" @click="Channeldeploy1 = false">取消</el-button>
        <el-button type="primary" @click='addLabel()'>确定</el-button>
      </div>
    </el-dialog>
    <br>
  </section>
</template>

<script>
import {getMerchantShop, shopupdate, getdimensionTagList, getSelectTagsByRole, postDimensionTagSave, postDimensionTagRemove } from "@/api/api";
export default {
  data() {
    return {
      routerDataId: '',
      visible: false,
      adm_tag:[],//超管 运营标签
      cw_tag:[],//财务标签
      fws_tag:[],//服务商标签
      tag_color:'',//标签颜色
      Channeldeploy1: false, //添加标签穿梭框开关
      unUsedTags:[],//添加标签穿梭框 未选择的标签
      usedTags:[],//添加标签穿梭框 已选择的标签
      agentname:'',//服务商名称
      rolesId:'',
      store:'',
      id:'',
      shopNo:'',//门店号
      shopName:'',//门店名
      merchantNo:'',//商户号
      merchantName:'',//商户名称
      terminalNoUni:'',//银联终端号
      managerName:'',//门店联系人
      managerMobile:'',//联系人手机号
      shopAddress:'',//门店地址
      statusName:'',//门店状态
      createTime:'',//创建时间
      addmendian: {
        name: "",
        address: "",
        contact: "",
        contactphone: "",
        bank: "",
        id:"",
        aliShopId:""
      },
      shopinfo:{}
    };
  },
  created() {
    this.routerDataId = sessionStorage.getItem('store_id')
    // this.shopName = JSON.parse(sessionStorage.getItem("store_shopName"))
    // console.log(this.shopName)
    var aaa = sessionStorage.getItem('userInfo')
    var bbb = JSON.parse(aaa)
    this.rolesId = bbb.rolesId
    this.getMerchantShop()//获取门店详情
    // this.getStore()
    if(this.rolesId == 1 || this.rolesId == 2 || this.rolesId == 8 ||this.rolesId == 9){
      this.getdimensionTagList()//获取指定对象已拥有的标签
    }
  },
  methods: {
     //修改thead 背景色
     tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: #F0F0F0;font-weight: 500;font-size:14px;color:#000;'
      }
    },
    //获取门店详情
    getMerchantShop(){
      getMerchantShop({},this.routerDataId).then(res => {
        if(res.code == 405){
          sessionStorage. removeItem('token')
          this.$router.push('/login');
        }else{
          if(res.code == 200){
            console.log(res)
            this.shopinfo = res.data
            this.shopNo = res.data.shopNo//门店号1
            this.shopName = res.data.shopName//门店名
            this.merchantNo = res.data.merchantNo//商户号merchantName
            this.merchantName = res.data.merchantName//商户名称
            this.terminalNoUni = res.data.terminalNoUni//银联终端号
            this.managerName = res.data.managerName//门店联系人
            this.managerMobile = res.data.managerMobile//联系人手机号
            this.shopAddress = res.data.shopAddress//门店地址
            this.statusName = res.data.statusName//门店状态
            this.createTime = res.data.createTime//创建时间
            this.aliShopId = res.data.aliShopId //口碑
            this.alias = res.data.alias
            this.id = res.data.id
          }else{
            this.$message.error(res.message);
          }
        }
      })
    },
    details(){
      this.visible = true
      this.addmendian = {
        name: this.shopName,
        address: this.shopAddress,
        contact : this.managerName,
        contactphone : this.managerMobile,
        bank : this.terminalNoUni,
        id : this.id,
        aliShopId: this.aliShopId,
        alias: this.alias
      }
    },
    // 修改门店
    shopupdate(){
      console.log(this.addmendian)
      shopupdate({
          shopName:this.addmendian.name,
          shopAddress:this.addmendian.address,
          managerName:this.addmendian.contact,
          managerMobile:this.addmendian.contactphone,
          terminalNoUni:this.addmendian.bank,
          aliShopId: this.addmendian.aliShopId,
          alias: this.addmendian.alias
        },this.addmendian.id).then(res => {
          console.log(res);
          if(res.code == 405){
            sessionStorage. removeItem('token')
            this.$router.push('/login');
          }else{
            if(res.code == 200){
              this.$message({
                message: '修改成功',
                type: 'success'
              });
              this.visible = false
              this.shopName = this.addmendian.name
              this.shopAddress = this.addmendian.address
              this.managerName = this.addmendian.contact
              this.managerMobile = this.addmendian.contactphone
              this.terminalNoUni = this.addmendian.bank
              this.aliShopId = this.addmendian.aliShopId
              this.alias = this.addmendian.alias
            }else{
              this.$message.error(res.message);
            }
          }
      });
    },
    //获取详情数据
    // getStore(){
    //   this.store = sessionStorage.getItem("store")
    //   var data = JSON.parse(this.store)
    //   console.log(data)
    //   this.shopNo = data.shopNo//门店号
    //   this.shopName = data.shopName//门店名
    //   this.merchantNo = data.merchantNo//商户号
    //   this.merchantName = data.merchantName//商户名称
    //   this.terminalNoUni = data.terminalNoUni//银联终端号
    //   this.managerName = data.managerName//门店联系人
    //   this.managerMobile = data.managerMobile//联系人手机号
    //   this.shopAddress = data.shopAddress//门店地址
    //   this.statusName = data.statusName//门店状态
    //   this.createTime = data.createTime//创建时间
    //   this.id = data.id
    // },
    //显示添加标签弹框
    popuptag(){
      if(this.Channeldeploy1 === false){
        this.usedTags = []
      }
      this.Channeldeploy1 = true
      //获取指定对象可添加标签
      getSelectTagsByRole({
        fid: this.routerDataId,
        roleId: 6
      }).then(res => {
        if (res.code == 405) {
            sessionStorage.removeItem("token");
            this.$router.push("/login");
        } else if(res.code == 200){
          if(this.unUsedTags.length == 0){
            for(var i = 0; i < res.data.allTags.length; i++){
              this.unUsedTags.push({key:res.data.allTags[i].id,label:res.data.allTags[i].name})
            }
          } 
          if(this.usedTags.length == 0){
            for(var i = 0; i < res.data.usedTags.length;i++){
              this.usedTags.push(res.data.usedTags[i].id)
            }
          }
          console.log(this.unUsedTags)
          console.log(this.usedTags)
        }else if(res.code == 500){
            this.$message.error(res.message);   
        }
      })
    },
    //获取指定对象已拥有的标签
    getdimensionTagList(){
      this.adm_tag = []
      this.cw_tag = []
      this.fws_tag = []
      getdimensionTagList({
        fid: this.routerDataId,
        roleId: 6
      }).then(res => {
        if (res.code == 405) {
            sessionStorage.removeItem("token");
            this.$router.push("/login");
        } else if(res.code == 200){
            for(var i = 0; i < res.data.length; i++){
              if(res.data[i].tagCreatorRole == 1 ||res.data[i].tagCreatorRole == 8){
                this.adm_tag.push({key:res.data[i].id,label:res.data[i].tagName})
              }else if(res.data[i].tagCreatorRole == 9){
                this.cw_tag.push({key:res.data[i].id,label:res.data[i].tagName})
              }else if(res.data[i].tagCreatorRole == 2){
                this.fws_tag.push({key:res.data[i].id,label:res.data[i].tagName})
              }
            }
            // if(this.rolesId == 2){
            //   this.adm_tag = []
            //   this.cw_tag = []
            // }
        }else if(res.code == 500){
            this.$message.error(res.message);   
        }
      })
    },
    //给指定对象添加标签
    addLabel(){
      console.log(this.usedTags.join(','))
      var data = this.usedTags.join(',')
      postDimensionTagSave({
        ids: data,
        fid: this.routerDataId,
        roleId: 6,
        holder: this.shopName
      },this.routerDataId).then(res => {
        if(res.code == 405){
          sessionStorage. removeItem('token')
          this.$router.push('/login');
        }else if(res.code == 200){
          this.$message({
            message: '添加成功',
            type: 'success'
          });
          this.Channeldeploy1 = false
          this.getdimensionTagList()
        }else if(res.code == 500){
          this.Channeldeploy1 = true
          this.$message.error(res.message)
        }
      })
    },
    handleClose(id){
      this.$confirm(`是否确定删除该标签？`, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
      }).then(() => {
          postDimensionTagRemove({},id).then(res =>{
            if(res.code == 405){
              sessionStorage. removeItem('token')
              this.$router.push('/login');
            }else if(res.code == 200){
              this.$message({
                message: '删除成功',
                type: 'success'
              });
              this.getdimensionTagList()
            }else if(res.code == 500){
              this.$message.error(res.message);
            }
          })
      })
      .catch(() => {
          this.$message({
              type: "info",
              message: "已取消"
          });
      });
    }
  },
};
</script>

<style scoped lang="less">
.title {
  background: #fff;
  padding: 10px;
  font-size: 18px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
}
.container1 {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  box-sizing: border-box;
}
.container1 .itemBox {
  width: 50%;
}
.container1 .itemBox .line {
  width: 100%;
  display: flex;
  font-size: 14px;
  line-height: 200%;
}
.container1 .itemBox .line div:nth-child(1) {
  width: 20%;
  text-align: left;
}
.container1 .itemBox .line div:nth-child(2) {
  width: 80%;
  text-align: left;
  color: #888888;
}
.container1 {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
  box-sizing: border-box;
  flex-wrap: wrap;
  .attachmentitem {
    width: 16.5%;
    text-align: center;
    margin-bottom: 20px;
    div {
      font-size: 14px;
      &:nth-child(1) {
        margin-bottom: 5px;
      }
    }
  }
}
.red {
  color: red;
}
.tableBox {
  width: 100%;
}
.el-input{
  width: 70%;
}
.el_tag{
  margin-right: 10px;
  margin-bottom: 5px;
}
.el-tag .el-icon-close{
  color: #fff;
}
</style>
